<template>
	
	<div class="welcome">
		<div v-if="$store.state.islogin==false">
			<el-row>
				<el-col :span="12" style="padding: 15px;">
					<h3>欢迎来到闲鱼</h3>
					<button class="tologin" @click="tologin">马上登陆</button>
				</el-col>
				<el-col :span="12" style="height: 120px;">
					<div class="welbb"></div>
				</el-col>
			</el-row>
		</div>
		<div v-else>
			
			<el-row>
				<el-col :span="12" style="padding: 15px;">
					<h3>{{$store.state.username}}</h3>
					<p style="font-size: 12px;color:#ccc">虽然没有挣到钱，但是在闲鱼开心就好</p>
					
				</el-col>
				<el-col :span="12" style="height: 120px;">
					<div>
						<div class="avatar">
							
						</div>
						<div class="expand"></div>
					</div>
				</el-col>
			</el-row>
		</div>
			
	</div>

</template>


<script>
	export default {
		name:'welcome',
		data(){
			return {
			}
		},
		methods:{
			tologin(){
					this.$router.push({path:'/user/login'})
			},
			mounted(){

			}
		}
	}
</script>

<style scoped="">

.tologin{
	background-color: #ffda44;
	border:none;
	height: 35px;
	width: 100px;
	font-weight: bold;
	margin-bottom: 20px;
	margin-left: 0px;
}

.welcome{
	background: #fff;
	border-radius: 5px;
	width: 100%;
	margin-bottom: 10px;
	text-align: left;
}

.welbb{
	width: 100%;
	height: 125px;
	background-image:url('../assets/images/bb.png');
	background-repeat: no-repeat;
	background-position: 20px 50px;
	margin-top: 20px;
	vertical-align: bottom;
}

.avatar{
	background-image: url('../assets/images/default_user_avatar.png');
	width: 60px;
	height: 60px;
	background-size: 100%;
	margin-top:40px;
	margin-left: 60px;
	display: inline-block;
}

.expand{
	display: inline-block;
	background-image: url('../assets/images/fish_coin_arrow.png');
	background-size: 100%;
	vertical-align: middle;
	width: 60px;
	height: 60px;
	float: right;
	margin-top:40px;
}
</style>